<template>
    <div class="card_w_h clearfix" @click="goMchtPage">
        <div class="coupon_detail_wrp">
            <img class="coupon_img" v-lazy="mchtInfo.mchtLogUrl" alt="图片">
            <div class="picNum">{{bannerNum}}</div>
            <div class="card-info-detail">
                <strong class="card-info_title">{{mchtInfo.mchtName | sliceString(9)}}</strong>
                <span v-if="mchtInfo.distance" class="mcht_name right">{{mchtInfo.distance | setDistance}}</span>
                <div class="card_info_type">
                    <p class="type">
                        <span class="type_name">{{mchtInfo.mchtTypeValue}}</span>
                        <star :couponComScore="mchtInfo.mchtComScore" class="type_star_left"></star>
                        <span class="type_comment">{{mchtInfo.mchtComNum}}条</span>
                    </p>
                </div>
                <p class="use-info-sold">
                    <span v-if="mchtInfo.mchtAddr">{{mchtInfo.mchtAddr | sliceString(12)}}</span>
                    <span class="mcht_location">¥{{mchtInfo.mchtPer}}/人</span>
                </p>
            </div>
            <div class="line"></div>
        </div>
    </div>
</template>

<script>
    import * as types from '../../vuex/types.js'
    import {Storage} from 'src/utils/storage.js'
    export default {
        data: () => ({
        }),
        props: {
            mchtInfo: {
                default: () => {}
            },
            bannerNum:''
        },
        computed:{
        },
        async created() {
        },
        mounted() {
            this.$nextTick(async () => {})
        },
        methods: {
            goMchtPage(){
                this.$router.push({name:"merchDetail",query:{
                        mchtId:this.mchtInfo.mchtId
                    }})
            }
        },
        components: {
            star: () => import('src/componentes/global/star.vue')
        }
    }
</script>

<style lang="scss" scoped="">
    .card_w_h {
        background-color: #ffffff;
        padding-bottom: 10px;
        .coupon_detail_wrp {
            display: inline-block;
            position: relative;
            /*margin-left: 1.2rem;*/
            width:100%;
            margin:0;
            span.coupon_case {
                position: absolute;
                top: 2rem;
                color: #fefefe;
                border-radius: 2px;
                font-size: 0.625rem;
                text-align: center;
                width: 2.8rem;
                height: 1.25rem;
                line-height: 1.25rem;
                z-index: 99;
            }
        }
        img.coupon_img {
            width:8.6rem;
            height:8.6rem;
            margin: 0;
            position:relative;
        }
        .picNum{
            width:2.2rem;
            height:1.4rem;
            -webkit-border-radius:100px;
            -moz-border-radius:100px;
            border-radius:100px;
            text-align:center;
            line-height:1.4rem;
            font-size:.8rem;
            color:#ffffff;
            background-color:rgba(0,0,0,.7);
            position:absolute;
            left:.2rem;
            bottom:.6rem;
        }
        .card_heard {
            width: 100%;
            height: 3.85rem;
            border-radius: 5px;
            p {
                &.mcht {
                    line-height: 3.85rem;
                    span.mcht_name {
                        font-size: 0.9rem;
                        margin-left: 1.2rem;
                        color: rgb(51,51,51);
                    }
                    span.mcht_location {
                        float: right;
                        font-weight: 300;
                        font-size: 0.9rem;
                        color: #ee3155;
                        margin-right: 1.2rem;
                    }
                }
            }
        }
        .card-info-detail {
            width:100%;
            padding-left:10rem;
            float: left;
            padding-top:1.5rem;
            position:absolute;
            right:10px;
            .card-info_title {
                float: left;
                font-size: 1.2rem;
                color:rgb(68,68,68);
                white-space: nowrap;
                overflow: hidden;
                margin-top: -0.2rem;
            }
            span.mcht_name{
                font-size:.85rem;
                color:rgb(153,153,153);
            }
            .card_info_type {
                margin: 1.6rem 0 1.05rem 0;
                & .type {
                    span.type_name {
                        font-size: 0.7rem;
                        float: left;
                        margin-right: 0.6rem;
                        margin-top: 0.2rem;
                        color: rgb(153, 153, 153px);
                    }
                    .type_star_left {
                        margin-top:.1rem;
                    }
                    span.type_comment {
                        font-size: 0.7rem;
                        color: rgb(153, 153, 153px);
                        margin-left: 0.6rem;
                        margin-top:.1rem;
                        vertical-align:-.2rem;
                    }
                }
            }
            .paValue {
                float: left;
                font-size: .8rem;
                line-height: 2rem;
                margin-left: 0.5rem;
                color: #7d7d7d;
                span.sum {
                    margin-left: 20px;
                    color: #ef3b5d;
                }
            }
            .use-info-sold {
                font-size: 0.7rem;
                position:relative;
                top:1rem;
                /*width: 15rem;*/
                span {
                    font-size:1rem;
                    color:rgb(102,102,102);
                }
                .mcht_location{
                    position:absolute;
                    right:0;
                    font-size:1rem;
                    color:rgb(238,49,85)
                }
            }
        }
        .line{
            margin-left:8.6rem;
            position:relative;
            top:8.55rem;
            border-bottom: 1px dashed #f0f0f0;
        }
        .card_foot {
            position: relative;
            top: -0.2rem;
            height: 2.758rem;
            line-height: 2.875rem;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            img {
                width: 1.25rem;
                height: 1.25rem;
                margin-left: 1.38rem;
                margin-top: 0.8rem;
            }
            .font {
                position: relative;
                top: -0.2rem;
            }
            div.card_progress_bar {
                position: absolute;
                top: 1rem;
                left: 7rem;
                font-size: 0.8rem;
                .bar {
                    width: 8rem;
                    height: 0.3125rem;
                    border: 1px solid #ffc2cd;
                    border-radius: 10px;
                    div.bar2 {
                        width: 90%;
                        height: 0.3rem;
                        border-radius: 10px;
                        background-color: #ffc2cd;
                    }
                }
                span {
                    position: relative;
                    top: -0.8rem;
                    color: #787878;
                }
            }

            button.card_foot_button {
                float: right;
                width: 5.625rem;
                height: 1.875rem;
                border-radius: 5px;
                color: #ffffff;
                margin: 0.5rem 1rem;
                background-color: #ec4e8a;
            }
        }
    }
</style>